<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>OL</title>
    <link rel="stylesheet" href="lib/ol.css" type="text/css">
    <link rel="stylesheet" href="style/map.css" type="text/css">
    <style>
        .my-scale {
            font-size: 12px;
            text-align: center;
            font-weight: bold;
            border: 3px solid red;
            color: red;
            border-top: none;
            position: absolute;
            bottom: 20px;
            left: 50%;
        }
        .my-mouse-position {
            font-size: 12px;
            font-weight: bold;
            color: red;
            position: absolute;
            bottom: 20px;
            right: 20px;
        }
    </style>
    <script src="lib/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
    let timeStart = Date.now()
    let count = 0, time
    const tile = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
            tileSize: 512
        })
    })
    var map = new ol.Map({
        target: 'map',
        controls: ol.control.defaults({
            zoom: false
        }),
        layers: [
            tile
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([107.11040599933166, 34.26271532332011]),
            zoom: 4
        })
    });

    map.addControl(new ol.control.Zoom({
        duration: 1000,
        delta: 2
    }))

    map.addControl(new ol.control.ScaleLine({
        minWidth: 80,
        className: 'my-scale',
        units: 'metric' // 'degrees', 'imperial', 'nautical', 'metric', 'us'
    }))

    map.addControl(new ol.control.MousePosition({
        className: 'my-mouse-position',
        projection: 'EPSG:4326',
        coordinateFormat: ol.coordinate.createStringXY(4)
    }))

    map.addControl(new ol.control.OverviewMap({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                })
            })
        ],
        collapsed: false,
        view: new ol.View({
            projection: 'EPSG:3857'
        })
    }))

    // const tms = new ol.layer.Tile({
    //     source: new ol.source.XYZ({
    //         url: 'http://localhost:8081/geoserver/gwc/service/tms/1.0.0/mapbox%3Aprovince@EPSG%3A900913@png/{z}/{x}/{-y}.png',
    //     })
    // })
    // map.addLayer(tms)

    /*const minWidth = 60
    const dom = document.getElementById('scaleLine')
    let currentZoom = -1
    // 地图拖动和缩放事件
    map.on('moveend', function (e) {
        if(currentZoom === map.getView().getZoom()) return
        const res = map.getView().getResolution()
        let width = minWidth;
        let minScale = res * width
        let unit = 'm', scale = minScale
        if(minScale / 1000 > 1) {
            unit = 'km'
            scale = Math.ceil(minScale / 1000)
        }
        const breaks = [1000, 500, 200, 100, 50, 20, 10]
        for (let i = 0; i < breaks.length; i++) {
            const b = breaks[i]
            if(scale / b > 1) {
                scale = Math.ceil(scale / b) * b
                break
            }
        }
        width = unit === 'm' ? scale / res : scale * 1000 / res
        dom.style.width = (width + 4) + 'px'
        dom.innerText = scale + unit
        currentZoom = map.getView().getZoom()
    })*/

</script>
</body>
</html>